<%@ page import="com.lagou.module01.entity.Student" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: 86178
  Date: 2021/6/26
  Time: 23:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学生信息管理</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<style>

    #selectId{
        width: 90px;
    }

</style>

<body>
<div>
    <div class="container" style="padding:50px">

        <h2 style="text-align: center">学生信息管理系统</h2>

        <h5>欢迎管理员用户：<%= request.getSession().getAttribute("user") %></h5>

        <!-- 表格 -->
        <table class="table table-responsive" id="tuser">
            <!-- 按钮，输入框 -->
            <caption>
                <button class="btn btn-info" id="show">显示</button>
                <button class="btn btn-info" id="add" data-toggle="modal" data-target="#myModal">新增</button>
                <button class="btn btn-info" id="del">删除</button>
                <button class="btn btn-info" id="edit" data-toggle="modal" data-target="#myModal">编辑</button>
                <button class="btn btn-info" id="select">查询</button>
                <input type="text" placeholder="按学号查询" id="selectId">
            </caption>

            <!-- 绘制表头信息 -->
            <thead>
            <tr>
                <th>序号</th>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>出生日期</th>
                <th>邮箱</th>
                <th>备注</th>
            </tr>
            </thead>
            <tbody id="tbody"></tbody>

            <%-- 绘制10行7列的假数据内容添加到表格中占位置 --%>
            <%-- 获取内置对象中放入的所有学生信息在这里进行显示 --%>
            <%
                List<Student> studentList = (List<Student>) session.getAttribute("studentList");
                for (int i = 0; i < studentList.size(); i++) {
            %>
            <tr>
                <td><input type="checkbox" value="<%= studentList.get(i).getSid() %>"/></td>
                <td> <%= studentList.get(i).getSid() %> </td>
                <td> <%= studentList.get(i).getName() %> </td>
                <td> <%= studentList.get(i).getSex() %> </td>
                <td> <%= studentList.get(i).getBirthday() %> </td>
                <td> <%= studentList.get(i).getEmail() %> </td>
                <td> <%= studentList.get(i).getRemark() %> </td>
            </tr>
            <%
                }
            %>
        </table>


        <!-- 管理学生信息的模态框（Modal） -->
        <div class="modal " id="myModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal" aria-hidden="true">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabelAdd">
                            管理学生信息
                        </h4>
                    </div>
                    <form action="studentAdd" method="post">
                        <input type="hidden" id="flag" name="flag"/>
                        <div class="modal-body" id="modal-body">
                            <label >姓名:</label>
                            <input type="text" class="form-control" id="m_name" name="name" placeholder="请输入姓名">
                            <label >性别:</label>
                            <input type="text" class="form-control" id="m_sex" name="sex" placeholder="请输入性别">
                            <label >出生日期:</label>
                            <input type="text" class="form-control" id="m_birthday" name="birthday" placeholder="请输入出生日期">
                            <label >邮箱:</label>
                            <input type="text" class="form-control" id="m_mail" name="email" placeholder="请输入邮箱">
                            <label >备注:</label>
                            <input type="text" class="form-control" id="m_comments" name="remark" placeholder="请输入备注">
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary" >提交</button>
                            <button type="reset" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="pagination_div" align="center">

        <ul class="pagination">
            <%
                // 声明一个局部变量i负责来实现当前页和上一页以及下一页的控制
                int i = 1;
                //获取内置对象中放入的学生总数
                int sum = Integer.parseInt(session.getAttribute("sumPage").toString());
                //声明变量len来获取总页数
                int len;
                if (sum % 5 == 0) {
                    len = sum / 5;
                } else {
                    len = sum/5+1;
                }
            %>

            <li><a href="findUserByPage?page=<%=(i>1?--i:i)%>">&laquo;上一页</a></li>
            <%
                // 循环显示所有页码
                for (int j = 1; j <= len; j++) {
                    // 当页码过多时需要使用...来代表，此时的编写思路就是采用条件判断
                    // 若j的数值大于某个范围且小于某个范围时，把打印j的位置换成...即可
                    // 当然随着当前页的改变也会随之改变，没时间写了...
                    //if (j == i) {
            %>
            <li><a href="findUserByPage?page=<%=j%>" id=<%=j%>> <%=j%> </a></li>
            <%--<li class="active"><a href="findUserByPage?page=<%=i%>" id=<%=i%>> <%=i%> </a></li>--%>
            <%
                    //}
                }
            %>
            <li><a href="findUserByPage?page=<%=(i<len?++i:i)%>">&raquo;下一页</a></li>
            <li><a href="#">总共<%=len%>页</a></li>
            <%--<li><a href="#">集合总长度<%= sum %></a></li>--%>
        </ul><br/>
        <h4>总共<%= sum %>条记录</h4>
    </div>
</div>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/operation.js"></script>
</body>

</html>

<script type="text/javascript">
    // 显示学生
    $("#show").on("click", function () {
        // 获取模块路径信息：/module01_homework/StudentManage.jsp
        var modulePathName = window.document.location.pathname;
        // 获取模块名称：/module01_homework
        var moduleName = modulePathName.substring(0, modulePathName.substr(1).indexOf('/') + 1);
        // 拼接结果为：sid=1&sid=2
        window.location.href = moduleName + "/findUserByPage";
    });

    // 增加学生
    $("#add").on("click", function (flag) {
        $("#flag").val("add");
        // alert($("#flag").val());
    });

    // 修改学生
    $("#edit").on("click", function (flag) {
        var checkboxs = $("input[type='checkbox']:checked");
        // 处理用户没有勾选的情况
        if (checkboxs.length == 0) {
            alert("请选择一个学生！");
            return false;
        } else if (checkboxs.length > 1) {
            alert("只能选择一个学生！");
            return false;
        } else {
            // alert(checkboxs[0].value);
            // 修改操作暂时支持一个个操作
            $("#flag").val(checkboxs[0].value);
            // alert($("#flag").val());
        }
    });

    // 删除用户
    $("#del").on("click", function() {
        // 获取勾选的复选框
        var checkboxs = $("input[type='checkbox']:checked");
        // 根据勾选的复选框就后面对应的值拼接起来
        var idsString = "";
        for(var i = 0; i < checkboxs.length; i++) {
            idsString += "sid="+checkboxs[i].value;
            if(i != checkboxs.length-1){
                idsString += "&";
            }
        }
        // 处理用户没有勾选的情况
        if (checkboxs.length==0) {
            alert("请选择一个用户！");
        } else {
            // 获取模块路径信息：/module01_homework/StudentManage.jsp
            var modulePathName = window.document.location.pathname;
            // 获取模块名称：/module01_homework
            var moduleName = modulePathName.substring(0, modulePathName.substr(1).indexOf('/') + 1);
            // 拼接结果为：sid=1&sid=2
            window.location.href = moduleName + "/studentRemove?" + idsString;
        }
    });

    // 查询学生
    $("#select").on("click", function() {
        var codeLike = $(this).siblings("#selectId").val();
        if (0 == codeLike.length) {
            alert("必须输入学号！");
            return false;
        }else if(/^\d{0,4}$/g.test(codeLike)){
            // 获取模块路径信息：/module01_homework/StudentManage.jsp
            var modulePathName = window.document.location.pathname;
            // 获取模块名称：/module01_homework
            var moduleName = modulePathName.substring(0, modulePathName.substr(1).indexOf('/') + 1);
            // 拼接结果为：sid=1&sid=2
            window.location.href = moduleName + "/studentQuery?sid=" + codeLike;
        }else{
            alert("学号必须是数字");
        }

    });
</script>